import { useEffect, useState } from "react";

import styles from "../../styles/InsuranceAmount.module.css";

const InsuranceAmount = ({ address }) => {
  // 全国时使用的数据
  const testData = [
    {
      unitName: '广东省',
      count: 2344,
    },
    {
      unitName: '江西省',
      count: 46,
    },
    {
      unitName: '福建省',
      count: 5446,
    },

  ]

  // 切换到某省的时候用的数据
  const test1Data = [
    {
      unitName: '广州',
      count: 2344,
    },
    {
      unitName: '深圳',
      count: 46,

    },
    {
      unitName: '佛山',
      count: 5446,

    },
  ]

  const test2Data = [
    {
      unitName: '天河区',
      count: 2344,

    },
    {
      unitName: '白云区',
      count: 46,
    },
  ]

  const [list, setList] = useState(testData);

  useEffect(() => {
    switch (address) {
      case "中国": setList(testData); break;
      case "广东省": setList(test1Data); break;
      default: setList(test2Data);
    }
  }, [address])
  return (
    <div className={styles.amount_box}>
      {
        list.map((item, index) => <div key={index} className={styles.li}>
          <div className={styles.li_container}>
            {item.unitName}：{item.count}
          </div>
        </div>)
      }


    </div>
  );
};

export default InsuranceAmount;
